import React from 'react';

import { UserOutlined, SafetyOutlined } from '@ant-design/icons';
import { Button, Form, Input, Row, Col, Divider } from 'antd';

import style from './index.less';
import logoImage from '../../assets/logo.png';
interface IProps {
  setFormNavigation: (value: string | number) => void;
}

const ForgetPassWord: React.FC<{}> = (props: IProps) => {
  const { setFormNavigation } = props;
  return (
    <div className={style.ForgetPassWordBox}>
      <div className={style.imageBox}>
        <img src={logoImage} alt="" />
      </div>
      <div className={style.ForgetPassWordForm}>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
        >
          <Form.Item name="username">
            <Input prefix={<UserOutlined className="site-form-item-icon" />} />
          </Form.Item>

          <Form.Item style={{ marginBottom: '0px' }}>
            <Row gutter={(10, 10)}>
              <Col span={15}>
                <Form.Item name="captcha">
                  <Input
                    prefix={<SafetyOutlined className="site-form-item-icon" />}
                  />
                </Form.Item>
              </Col>
              <Col span={8}>
                <div className={style.forgetpasswordVerify}>
                  <Button
                    onClick={() => {
                      console.log(1);
                    }}
                  >
                    <img src={logoImage} alt="" />
                  </Button>
                </div>
              </Col>
            </Row>
          </Form.Item>

          <Button
            style={{ width: '100%' }}
            type="primary"
            onClick={() => {
              setFormNavigation('3');
            }}
          >
            下一步
          </Button>
        </Form>

        <p className={style.forgetformantbut}>
          <Button
            type="link"
            style={{ paddingLeft: '0px' }}
            onClick={() => {
              setFormNavigation('1');
            }}
            block
          >
            返回
          </Button>
        </p>

        <div className={style.formfooter}>
          <a
            href="https://www.allinpayintl.com/ch-zh/us.html"
            style={{ color: 'rgb(69 73 79 / 42%)' }}
          >
            关于通华
          </a>
          <Divider type="vertical" />
          <a
            href="https://www.allinpayintl.com/ch-zh/contact.html"
            style={{ color: 'rgb(69 73 79 / 42%)' }}
          >
            联系我们
          </a>
        </div>
      </div>
    </div>
  );
};

export default ForgetPassWord;
